<template>
	<div class="flex">
		<van-divider>相关推荐</van-divider>
		<ul>
			<li v-for="(item, index) in FoodsMenuList" :key="index" @click="JumpFoodsDetail(item)">
				<div class="Pic_Box">
					<img :src="item.smallImg" alt="" />
				</div>
				<p class="van-ellipsis">{{ item.cpName }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
import { getMenuDetail } from '@/api/menu';
export default {
	name: 'BaseRecommend',
	created() {
		this.FoodsMenuList = getMenuDetail({
			type: '热门专题',
			maxResults: 4,
		}).then((res) => {
			this.FoodsMenuList = res.datas;
		});
	},
	data() {
		return {
			FoodsMenuList: [],
		};
	},
};
</script>

<style scoped>
.flex {
	display: flex;
	flex-direction: column;
	margin: 20px;
}
h1 {
	font-size: 22px;
}
ul {
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
ul li {
	width: 48%;
	margin-bottom: 20px;
}
.Pic_Box {
	max-height: 180px;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
}
.Pic_Box img {
	width: 100%;
	border-radius: 10px;
}
ul li p {
	color: #333;
	font-weight: 500;
	font-size: 14px;
	font-family: si_yuan_hei_ti_7;
}
</style>
